<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>我的投递</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <style>
          .send{width: 100%}
          .content{border-bottom: 1px solid #E5E5E5;margin-bottom: 20px}
          .tab{padding: 53px 20px 10px;justify-content: space-between;align-items: center;}
          .tab span{padding-bottom: 10px;font-size: 15px;color: #999;}
          .tab span.active{color: #000;font-weight: 600;position: relative;}
          .tab span.active::after{content: '__';     position: absolute;width: 30px;height: 2px;background-color: 000;top: 10px;left:50%;margin-left: -8px}
          .list{padding: 0 20px;display: none}
          .list.active{display: block;}
          .list .wrap{display: flex;flex-direction: column;justify-content: space-around;padding-bottom: 33px}
          .list .wrap .item{display: flex;align-items: center;justify-content: space-between;}
          .list .wrap .item .title{font-size: 16px;color: #000;font-weight: 600;overflow: hidden;
  text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
          .list .wrap .item .apply{color: #999}
          .list .wrap .item .money{ color: #EB5758;}
          .list .wrap .item .money .redfont{font-size: 24px}
          .list .wrap .item.self{justify-content: flex-start;margin: 5px 0}
          .list .wrap .item.self span{padding: 3px 9px;color:  #8B8EA3;font-size: 11px;border-radius: 5px;background-color:  #E4E7F0;display: inline-block;}
          .list .wrap .item.self span.sex{margin-right: 10px}
          .list .wrap .item .type{justify-content: space-between;align-items: center;}
          .list .wrap .item .type button{padding: 7px 17px;font-size: 13px;border-radius: 16px}
          .list .wrap .item .type button.cancel{border: 1px solid #cecece;color: #999;margin-right: 10px}
          .list .wrap .item .type button.merchant{border: 1px solid #000;color: #000}
          .list .nodata{padding-top: 13%;justify-content: center;align-items: center;}
          .list .nodata img{width: 112px;height: 95px;margin-bottom: 25px}
          .list .nodata span{color: #999;font-size: 13px}

          .show{display: block;}
          .none{display: none}
          .boxpout{width: 100%;height: 100%;}
          .bg{background-color: rgba(0,0,0,0.4);display: flex;justify-content: center;align-items: center;top: 0;left: 0;width: 100%;height: 100%;z-index: 30;position: fixed;}
          .box{z-index: 99;width: 76%;height: 188px;background-color: #fff;border-radius: 20px;position: relative;}
          .box img.close{width: 26px;height: 26px;position: absolute;bottom: -40px;left: 50%;margin-left: -13px;}
          .box .boxhtml{text-align: center;}
          .box .boxhtml h3{font-size: 20px;color: #000;font-weight: 600;margin:20px auto 15px }
          .boxhtml p{font-size: 16px;color: #999;line-height: 24px;}
          .boxhtml p.wechat{font-size: 18px;color:  #FFAC00;}
          .boxhtml .btn{display: flex;}
          .boxhtml .btn button{margin: 25px auto 0;width: 53%;height: 45px;border-radius: 12px;background: #FFAC00;color: #fff;font-size: 15px;}

          .box1{z-index: 99;width: 76%;height: 132px;background-color: #fff;border-radius: 20px;position: relative;}
          .box1 img.close{width: 26px;height: 26px;position: absolute;bottom: -40px;left: 50%;margin-left: -13px;}
          .box1 .boxhtml1{text-align: center;}
          .box1 .boxhtml1 h3{font-size: 18px;color: #000;font-weight: 600;margin:20px auto 30px }
          .boxhtml1 .btn1{display: flex;justify-content: space-around;align-items: center;}
          .boxhtml1 .btn1 span{color: #999;font-size: 18px;}
          .boxhtml1 .btn1 span#right{color:  #FFAC00;}
      </style>
  </head>
  <body>
    <div class="send">
      <div class="returnBox">
        <div class="return"> <img src="../image/return.png" onclick="api.closeWin()"> <span class="us">我的投递</span></div>

      </div>
      <div class="content">
        <div class="flex-wrap tab">
          <span onclick="tagBtn( this );">全部</span>
          <span onclick="tagBtn( this );">已报名</span>
          <span onclick="tagBtn( this );">已通过</span>
          <span onclick="tagBtn( this );">已工作</span>
        </div>

      </div>
      <!-- 全部 -->
      <div class="list" id="list0">
        <!-- <div class="wrap">
          <div class="item">
            <div class="title">全新网络在线高薪兼职，简单立结！</div>
            <div class="apply">已报名</div>
          </div>
          <div class="item self">
            <span class="sex">男女不限</span>
            <span>长期</span>
          </div>
          <div class="item">
            <div class="money"><span class="redfont">800 </span>元/天</div>
            <div class="type flex-wrap"><button type="button" class="cancel" >取消报名</button><button type="button" class="merchant">联系商家</button></div>
          </div>
        </div> -->
      </div>
      <!-- 已报名 -->
      <div class="list" id="list1">

      </div>
      <!--已通过  -->
      <div class="list " id="list2">
        <!-- <div class="nodata flex-wrap flex-vertical">
          <img src="../image/nodata.png" />
          <span>暂时没有数据显示～</span>
        </div> -->
      </div>

      <!--已工作  -->
      <div class="list " id="list3">
        <!-- <div class="nodata flex-wrap flex-vertical">
          <img src="../image/nodata.png" />
          <span>暂时没有数据显示～</span>
        </div> -->
      </div>

    </div>

    <div class="boxpout none">
      <div class="bg">
        <div class="box">
          <div class="boxhtml">
            <h3>联系商家</h3>
            <p class="wechat"></p>
            <div class="btn">
              <button id="jump">复制并跳转微信</button>
            </div>
          </div>
          <img src="../image/boxClose.png" class="close">
        </div>
      </div>

    </div>
    <div class="boxpout1 none">
      <div class="bg">
        <div class="box1">
          <div class="boxhtml1">
            <h3>真的要放弃这个职位吗？</h3>
            <div class="btn1">
              <span id="left">确认取消</span>
              <span id="right">再想想</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/encrypt.js"></script>
  <script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar($api.dom('.send'));
        var num = api.pageParam.num

        var eFootLis = $api.domAll('.tab span'),
        eHeaderLis = $api.domAll('.list');

        $api.addCls( eFootLis[num], 'active');
        $api.addCls( eHeaderLis[num], 'active');
        var ordStatus = '';
        switch (num) {
          case 0:
            ordStatus = 0 //所有
            break;
          case 1:
            ordStatus = 10//已报名
            break;
          case 2:
            ordStatus = 20//已通过
            break;
          case 3:
            ordStatus = 30//已工作
            break;
        }
        refersh()
        action(ordStatus,num,1)

        $api.addEvt($api.dom('#jump'), 'click', function(){//复制跳转微信
          var clipBoard = api.require('clipBoard');
          var copyhtml = $api.html($api.dom('.wechat'));

            clipBoard.set({
                value: copyhtml
            }, function(ret, err) {
                if (ret) {
                  $api.removeCls($api.dom('.boxpout'),'show')
                  $api.addCls($api.dom('.boxpout'),'none')
                  var systemType = api.systemType;
                  if(systemType == 'android'){
                    api.openApp({
                      androidPkg: 'com.tencent.mm',
                      mimeType: 'text/html',
                      uri: 'weixin://'
                      }, function(ret, err) {
                          if (ret) {

                          } else {
                               alert("您还未安装微信");
                          }
                    });
                  }
                  if(systemType == 'ios'){
                    api.openApp({
                        iosUrl: 'weixin://',     //打开微信，其中weixin为微信的URL Scheme
                    });

                  }

                } else {
                  api.toast({
                    msg: '复制失败',
                    duration: 2000,
                    location: 'middle'
                  });
                }
            });

        });

        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err){

          if (b <20 ) {
                $api.append($api.dom('#list'+num),'<div class="nomore">没有更多了~</div>')
                api.removeEventListener({
                    name: 'scrolltobottom'
                });
            } else {
                pi+=1;
                action(ordStatus,num,pi)
            }
        });

    };
    function cancel(callback){ //取消报名
      $api.removeCls($api.dom('.boxpout1'),'none')
      $api.addCls($api.dom('.boxpout1'),'show')
      $api.addEvt($api.dom('#left'), 'click', function(){
        $api.removeCls($api.dom('.boxpout1'),'show')
        $api.addCls($api.dom('.boxpout1'),'none')
        callback && callback()
      });
      $api.addEvt($api.dom('#right'), 'click', function(){
        $api.removeCls($api.dom('.boxpout1'),'show')
        $api.addCls($api.dom('.boxpout1'),'none')

      });


    }

    var b = 0
    function action(ordStatus,tag,pi){ //获取列表
      var pz = 20;
      var base = new Base64();
      var userid = $api.getStorage('userID');
      var json = {'userID':userid,'ordStatus':ordStatus,'pi':pi,'pz':pz}
      var parameter = base.encode(JSON.stringify(json));
      var signValue = parameter + secretKey;
      var sign = signValue.MD5(32);

      $api.post(url+'getJianzhiOrderByUser.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){

        if(ret.code == 200){
          var arryHtml = []
          var html='';
          var data = ret.data.JobList;

          b = data.length
          if(!data.length){
            b = 0
          }
          if(b>0){
            arryHtml = arryHtml.concat(data)
            for (var i = 0; i < arryHtml.length; i++) {
              html+='<div class="wrap" >'+
              '<div class="item">'+
              '<div class="title" data-jian="'+arryHtml[i].jianZhiID+'">'+arryHtml[i].listTitle+'</div>'
              if(arryHtml[i].status == 10){//投递状态
                html+='<div class="apply">已报名</div>'
              }else if(arryHtml[i].status == 20){
                html+='<div class="apply">已通过</div>'
              }else if(arryHtml[i].status == 30){
                html+='<div class="apply">已工作</div>'
              }else if(arryHtml[i].status == 40){
                html+='<div class="apply">已取消</div>'
              }

              html+='</div>'+
              '<div class="item self">'
              if(arryHtml[i].sex == 10){ //性别要求
                html+='<span class="sex">仅限男</span>'
              }else if(arryHtml[i].sex == 20){
                html+='<span class="sex">仅限女</span>'

              }else if(arryHtml[i].sex == 30){
                html+='<span class="sex">男女不限</span>'
              }
              if(arryHtml[i].effective == 10){ //有效时间
                html+='<span>长期</span>'
              }

              html+='</div>'+
              '<div class="item">'+
              '<div class="money"><span class="redfont">'+arryHtml[i].salary+' </span>'
              if(arryHtml[i].salaryUnit == 10){ //薪水单位
                html+='元/小时</div>'
              }else if(arryHtml[i].salaryUnit == 20){
                html+='元/天</div>'
              }else if(arryHtml[i].salaryUnit == 30){
                html+='元/次</div>'
              }

              html+='<div class="type flex-wrap"><button type="button" class="cancel" data-id="'+arryHtml[i].orderID+'">取消报名</button>'+
              '<button type="button" class="merchant" data-info="'+arryHtml[i].contactInfo+'">联系商家</button></div>'+
              '</div>'+
              '</div>'

            }
            $api.html($api.dom('#list'+tag), html);

            var wrapList = $api.domAll('.title');
            for (var i = 0; i < wrapList.length; i++) {
              $api.addEvt(wrapList[i], 'click', function(){
                var jianZhiID = $api.attr(this,'data-jian')

                api.openWin({
                  name: 'jobDetails',
                  url: './jobDetails.html',
                  pageParam:{
                    jianZhiID:jianZhiID
                  }
                });

              },false);
            }
            var cancelList = $api.domAll('.cancel');
            for (let i = 0; i < cancelList.length; i++) {
              $api.addEvt(cancelList[i], 'click', function(){//取消报名

                var orderID = $api.attr(this,'data-id')
                var json = {'userID':userid,'orderID':orderID}
                var parameter = base.encode(JSON.stringify(json));
                var signValue = parameter + secretKey;
                var sign = signValue.MD5(32);

                cancel(function(){

                  $api.post(url+'cancelJianzhiOrder.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){

                    if(ret.code == 200){

                      api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'middle'
                      });
                      window.location.reload()

                    }else{
                      api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'middle'
                      });
                    }
                  })
                })

              });
            }

            var merList = $api.domAll('.merchant'); //联系商家

            for (let i = 0; i < merList.length; i++) {
              $api.addEvt(merList[i], 'click', function(){ //联系商家
                var contactInfo = $api.attr(this,'data-info')
                if(contactInfo){

                  $api.html($api.dom('.wechat'), contactInfo);

                }
                $api.removeCls($api.dom('.boxpout'),'none')
                $api.addCls($api.dom('.boxpout'),'show')

              })
            }

            $api.addEvt($api.dom('.close'), 'click', function(){ //关闭弹窗
              $api.removeCls($api.dom('.boxpout'),'show')
              $api.addCls($api.dom('.boxpout'),'none')
            });

          }else{
            api.removeEventListener({
                name: 'scrolltobottom'
            });
            var str = '<div class="nodata flex-wrap flex-vertical">'+
              '<img src="../image/nodata.png" />'+
              '<span>暂时没有数据显示～</span>'+
              '</div>'
              $api.html($api.dom('#list'+tag), str);
            }

          }else{
            api.toast({
              msg: ret.msg,
              duration: 2000,
              location: 'middle'
            });

          }
        })
      }
      function tagBtn(tag){
        var ordStatus = ''
        if( tag == $api.dom('.tab span.active') )return;
        var eFootLis = $api.domAll('.tab span'),
        eHeaderLis = $api.domAll('.list'),
        index = 0;


        for (var i = 0,len = eFootLis.length; i < len; i++) {
          if( tag == eFootLis[i] ){
            index = i;
          }else{
            $api.removeCls(eFootLis[i], 'active');
            $api.removeCls(eHeaderLis[i], 'active');
          }
        }
        switch (index) {
          case 0:
            ordStatus = 0 //所有
            break;
          case 1:
            ordStatus = 10//已报名
            break;
          case 2:
            ordStatus = 20//已通过
            break;
          case 3:
            ordStatus = 30//已工作
            break;
        }

        $api.addCls( eFootLis[index], 'active');
        $api.addCls( eHeaderLis[index], 'active');
        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err){

          if (b <20 ) {
                $api.append($api.dom('#list'+index),'<div class="nomore">没有更多了~</div>')
                api.removeEventListener({
                    name: 'scrolltobottom'
                });
            } else {
                pi+=1;
                action(ordStatus,index,pi)
            }
        });
        action(ordStatus,index,1) //执行请求
      }
  </script>
  </html>
